<template>
  <div class="LearnDetail" v-if="data.title">
    <div class="content-wrap">
      <div class="title">{{ data.title }}</div>
      <div class="msg">
        <div class="left">
          <div class="author" v-if="data.publishUserName">{{ data.publishUserName }}</div>
          <div class="time">{{ formatDate(new Date(data.publishTime), 'yyyy-MM-dd HH:mm') }}</div>
        </div>
        <div class="right">
          <div class="readNum">浏览量：{{ data.readNum }}</div>
        </div>
      </div>
      <pre class="content" v-html="data.content" />
    </div>
  </div>
</template>

<script>
import api from '@/api'
import { generateImgUrl, formatDate } from '@/utils'
import transformTichText from '@/utils/transformTichText'

export default {
  components: {

  },
  data () {
    return {
      generateImgUrl,
      data: {},
      formatDate,
    }
  },
  onLoad (option) {
    this.id = option.id
    this.getData()
  },
  onShareAppMessage () {
    return {
      title: this.data.title,
      imageUrl: generateImgUrl(this.data.coverImg),
      query: {
        id: this.id,
      },
    }
  },
  methods: {
    async getData () {
      const { result } = await api.getLearnDetail({ id: this.id })
      result.content = transformTichText(result.content)
      this.data = result
    },
  },
}
</script>

<style lang="scss" scoped> @import "~css/var.scss";

.LearnDetail {
	box-sizing: border-box;
	min-height: 100vh;

	.content-wrap {
		padding: 19px 13px;
		background: #fff;

		.title {
			font-size: $fz-xl;
			color: #333;
		}

		.msg {
			display: flex;
			justify-content: space-between;
			margin-top: 8px;
			font-size: $fz-s;
			color: #999;

			.left {
				display: flex;

				.author {
					color: #d1272f;
				}

				.time {
					margin-left: 16px;
				}
			}
		}

		.img {
			margin-top: 15px;

			img {
				width: 100%;
				border-radius: 5px;
			}
		}

		.content {
			margin-top: 15px;
			color: #666;
		}
	}
}
</style>
